<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--目的是让bootstrap开发的玩网站对移动设备更加友好，确保适当的绘制和触屏缩放 -->
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="jquery/jquery-3.4.1.js"></script>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
    <link rel="shortcut icon" href="image/hxmcatton.ico" type="image/x-icon">
    <script>
        $(document).ready(function(){
            $(document).ready(function(){
                $(".hello").animate({
                    width: "100%",
                    height: "100px",
                }, 1000);
                $("#title").animate({
                    "font-size": "50px"
                }, 1000);
                $("#btn1").click(function(){
                    alert("所以我建议你 依然还是听我的");
                })
                $("#btnmovie，#btnvideo, #btnNb").click(function(){
                    alert("只能为你找到腾讯");
                });
                $("#btnshow").click(function(){
                    $("#show").slideToggle(1000)
                });
                $("#btnshow2").click(function(){
                    $(".showpicture").fadeToggle(1000);
                });
                $("#introduce").click(function(){
                    $("#introduceHXM").toggle(600);
                });

            });
        })
    </script>

    <style>
        body{
            background-image: url('image/hxmcatton.jpg');
            background-color: #cccccc;
            background-repeat:repeat;
            background-attachment: fixed;
            margin: 0px;
            padding: 0px;
        }
        .hello{
            width: 1px;
            height: 1px;
            background-color: rgb(58, 71, 75);
            position: fixed;
            opacity: 0.8;
            z-index: 2;
            /*设置导航栏位于显示的最上面  */
         }
        #title{
            text-align:left;
            letter-spacing: 20px;
            font-size: 1px;
            margin: 10px;
            color: rgb(221, 240, 52);
            filter: blur(1px);
            left: 40px;
        }
        p{
            color: white;
            font-size: 18px;
        }
        h1{
            color:rgb(243, 4, 124);
        }
        .showpicture img{
            width: 400px;
            height: 300px;
        }
        #show, .showpicture{
            display: none;
        }
        .item img{
            width: 100%;
            height: 100%;
        }

    </style>

    <title>hxm</title>
</head>

<body>
    <div>
        <div class="hello">
            <p style="display:inline; position: absolute;" id="title" >纯属娱乐 并无恶意</p>
            <form class="form-inline" role="form" style="display: inline; position: absolute; right: 20px; top: 30px;">
                <div class="form-group" id="search">
                    <input type="text" class="form-control" id="search" placeholder="no response">
                    <button class="btn btn-success" id="btn1">搜索</button>
                </div>  
            </form>
        </div>
    </div>
    <br>
    <br>
    <br>
    <br>
    <br>
        <!--这一段轮播图是从官方文档中粘贴，然后自己定制的，但是已经初步了解了它的属性和用法-->
        <div class="container">
            <div class="row">
                <div id="hxm_movie_carousel" class="carousel slide" data-ride="carousel" style="width:800px; height: 480px;margin-left: 140px;">
                    <!-- 指示器 -->
                    <ol class="carousel-indicators">
                    <li data-target="#hxm_movie_carousel" data-slide-to="0" class="active"></li>
                    <li data-target="#hxm_movie_carousel" data-slide-to="1"></li>
                    <li data-target="#hxm_movie_carousel" data-slide-to="2"></li>
                    </ol>
                
                    <!-- 内容 -->
                    <div class="carousel-inner" role="listbox">
                    <div class="item active">
                        <img src="image/hxmmovie1.jpg">
                    </div>
                    <div class="item">
                        <img src="image/hxmmovie2.jpg">
                    </div>
                    <div class="item">
                        <img src="image/hxmmovie3.jpg">
                    </div>
                    </div>
                
                    <!-- 左右控件 -->
                    <a class="left carousel-control" href="#hxm_movie_carousel" role="button" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                    </a>
                    <a class="right carousel-control" href="#hxm_movie_carousel" role="button" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                    </a>
        
                </div>
                <br><br><br>
                <a href="https://v.qq.com/x/search/?q=%E9%BB%84%E6%99%93%E6%98%8E&stag=0&smartbox_ab=" role="button">
                    <button class="btn btn-success col-md-5 col-md-offset-3 btn-lg" type="button" id="btnmovie">黄晓明的电影</button>
                </a>
                <br><br><br>
                <div id="hxm_video_carousel" class="carousel slide" data-ride="carousel" style="width:800px; height: 480px;margin-left: 140px;">
                    <!-- Indicators -->
                    <ol class="carousel-indicators">
                    <li data-target="#hxm_video_carousel" data-slide-to="0" class="active"></li>
                    <li data-target="#hxm_video_carousel" data-slide-to="1"></li>
                    <li data-target="#hxm_video_carousel" data-slide-to="2"></li>
                    </ol>
                
                    <!-- Wrapper for slides -->
                    <div class="carousel-inner" role="listbox">
                    <div class="item active">
                        <img src="image/hxmvideo1.jpg" alt="...">
                    </div>
                    <div class="item">
                        <img src="image/hxmvideo2.jpg" alt="...">
                    </div>
                    <div class="item">
                        <img src="image/hxmvideo3.jpg" alt="...">
                    </div>
                    </div>
                
                    <!-- Controls -->
                    <a class="left carousel-control" href="#hxm_video_carousel" role="button" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                    </a>
                    <a class="right carousel-control" href="#hxm_video_carousel" role="button" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                    </a>
        
                </div>
                <br><br><br><br>
                <a href="https://v.qq.com/x/search/?q=%E9%BB%84%E6%99%93%E6%98%8E&stag=0&smartbox_ab=" role="button">
                    <button class="btn btn-success col-md-5 col-md-offset-3 btn-lg" type="button" id="btnvideo">黄晓明的电视剧</button>
                </a>
                <br><br><br>
                <div id="hxm_nb_carousel" class="carousel slide" data-ride="carousel" style="width:800px; height: 480px;margin-left: 140px;">
                    <!-- Indicators -->
                    <ol class="carousel-indicators">
                    <li data-target="#hxm_nb_carousel" data-slide-to="0" class="active"></li>
                    <li data-target="#hxm_nb_carousel" data-slide-to="1"></li>
                    <li data-target="#hxm_nb_carousel" data-slide-to="2"></li>
                    </ol>
                
                    <!-- Wrapper for slides -->
                    <div class="carousel-inner" role="listbox">
                    <div class="item active">
                        <img src="image/hxmNb.jpg" alt="...">
                    </div>
                    <div class="item">
                        <img src="image/hxmNb2.jpg" alt="...">
                    </div>
                    <div class="item">
                        <img src="image/hxmNb3.jpg" alt="...">
                    </div>
                    </div>
                
                    <!-- Controls -->
                    <a class="left carousel-control" href="#hxm_nb_carousel" role="button" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                    </a>
                    <a class="right carousel-control" href="#hxm_nb_carousel" role="button" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                    </a>
        
                </div>
                <br><br><br><br>
                <<a href="https://v.qq.com/x/search/?q=%E9%BB%84%E6%99%93%E6%98%8E&stag=0&smartbox_ab=" role="button">
                    <button class="btn btn-success col-md-5 col-md-offset-3 btn-lg" type="button" id="btnNb">黄晓明的综艺</button>
                </a>
            </div>
        </div>

        
        <div class="container">
            <br>
            <button class="btn btn-danger" id="introduce">黄晓明简介</button>
            <p id="introduceHXM" style="display: none">
                黄晓明，1977年11月13日生于山东省青岛市市南区，中国内地男演员、歌手、商人，毕业于北京电影学院表演系<br>
            </p>
            <br>
            <br>
            <button class="btn btn-danger" id="btnshow">明人明言</button>
            <div id="show">
                <br>
                <h1>三大原则：</h1>
                <p>都听我的原则，我觉得原则，我不管原则</p>

                <h1>四项必须：</h1>
                <p>
                    必须是个问题，也是你的问题。<br>
                    必须解决，你来解决<br>
                    必须搞定，全部搞定<br>
                    必须说一个就一个
                </p>
                <h1>经典语录：</h1>
                <p>
                    1. 我不要你觉得，我要我觉得。<br>
                    2.你们不要闹了，就这样，都听我的。<br>
                    3. 我不觉得这是个问题!<br>
                    4.这是你的问题，你必须要解决!<br>
                    5.这个问题不需要商量，都听我的。<br>
                    6.万一呢？要是有人想一个人吃三分套餐。<br>
                    7.要不我觉得你别干了吧。<br>
                    8.买！什么都可以买！<br>
                    9.我不管几个，我要全部搞定，我再说一遍，全部搞定，不要再问我几个，全部，听懂了吗!全部搞定!<br>
                    10.我不管，我说一个就一个。
                </p>
            </div>
        

            <br>
            <br>
            <button class="btn btn-danger" id="btnshow2">明人明包</button>

            <div class="showpicture">
                <img src="image/hxmhhh1.jpg" class="img-circle">
                <img src="image/hxmhhh2.jpg"class="img-circle col-lg-offset-3">
                <img src="image/hxmhhh3.jpg"class="img-circle">
                <img src="image/hxmhhh4.jpg"class="img-circle col-lg-offset-3">
                <img src="image/hxmhhh5.jpg"class="img-circle">
                <img src="image/hxmhhh6.jpg"class="img-circle col-lg-offset-3">
                <img src="image/hxmhhh7.jpg"class="img-circle">
                <img src="image/hxmhhh8.jpg"class="img-circle col-lg-offset-3">
                <img src="image/hxmhhh9.jpg"class="img-circle">
                <img src="image/hxmhhh10.jpg"class="img-circle col-lg-offset-3">
            </div>
        </div>
    <script src="jquery/jquery-3.4.1.js"></script>
    <script src="bootstrap/js/bootstrap.js"></script>
</body> 

</html>